<template>
	<view>
		<view v-if="pageState == 'resumeState'">
			<view class="box_1">
				<view class="tx1">简历公开状态</view>
				<view class="tx2">
					简历公开
					<u-switch size="35" class="self_switch" v-model="display" active-color="#45db5e" />
				</view>
			</view>
			<view class="form_split_10"></view>
			<view class="box_2">
				<view class="tx1">简历姓名显示</view>
				<u-radio-group v-model="displayName">
					<view class="tx2" @click.stop="handleLine('1')">
						实名显示
						<text>(如：王昌明)</text>
						<u-radio class="self_radio" name="1" checked-color="#2199ff"></u-radio>
					</view>
					<view class="tx2" @click.stop="handleLine('0')">
						匿名显示
						<text>(如：王先生/女士)</text>
						<u-radio class="self_radio" name="0" checked-color="#2199ff"></u-radio>
					</view>
				</u-radio-group>
			</view>
			<view style="padding: 40rpx 0 50rpx;margin: 0 20rpx;">
				<u-button type="primary" shape="circle" @click="handleDisplayName(displayName)">
					保存
				</u-button>
			</view>
			<view class="form_split_10"></view>
		</view>
		<view v-if="pageState == 'shieldCompany'">
			<view class="box_3">
				<view class="tx1">屏蔽企业</view>
				<view class="tx2" v-for="(item, index) in blackList" :key="index">
					{{ item.companyname }}
					<view class="del" @click="handleDelete(item.id)"></view>
				</view>
			</view>
			<view class="box_4">
				<u-button type="primary" shape="circle" @click="handleClick('/personal/PrivacyAddBlackList')">
					添加企业
				</u-button>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-modal v-model="isSecrecy" title="提示" content="简历设置为保密后，任何企业都将无法搜索到您的简历，是否确认设置保密？" show-cancel-button
			@confirm="onInput" @cancel="isSecrecy = false"></u-modal>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	import { getParam } from '../utils/index.js'
	export default {
		name: 'PrivacySetting',
		data() {
			return {
				isSecrecy: false, //简历是否为保密
				radio: 1,
				display: true,
				displayName: '1',
				blackList: [],
				controlStatus: false,
				pageState: ''
			}
		},
		mounted() {
			this.pageState = getParam().privacyType
			var navTitle = ''
			if (this.pageState == 'resumeState') {
				navTitle = '简历公开状态'
			} else if (this.pageState == 'shieldCompany') {
				navTitle = '屏蔽企业'
			}
			uni.setNavigationBarTitle({
				title: navTitle
			})
		},
		onShow() {
			// 获取隐私设置信息
			http
				.get(api.resume_privates_info)
				.then(res => {
					if (parseInt(res.data.code) === 200) {
						this.initData(res.data.data)
					} else {
						this.$refs.uTips.show({
							title: res.data.message,
							type: 'error'
						})
					}
				})
				.catch(err => {
					console.log(err)
				})
		},
		watch: {
			display(val) {
				if (val) {
					if (this.controlStatus) {
						// 开启
						this.switchTypeFun(1)
						this.updateStoreBasic(1)
						this.controlStatus = false
					}
				} else {
					// 关闭
					// 判断是否点击了确认按钮
					if (this.controlStatus) {
						this.display = false
						this.isSecrecy = false
					} else {
						this.isSecrecy = true
						this.display = true
					}
				}
			}
		},
		computed: {
			basic() {
				return this.$store.state.resume.basic
			}
		},
		methods: {
			handleClick(path) {
				uni.navigateTo({
					url: path
				})
			},
			handleLine(value) {
				this.displayName = value
			},
			// 初始化数据
			initData(interfacePrivacy) {
				this.display = parseInt(interfacePrivacy.is_display) === 1
				if (!this.display) {
					this.controlStatus = true
				}
				this.displayName = `${interfacePrivacy.display_name}`
				this.blackList = interfacePrivacy.blacklist
			},
			// 简历状态切换 确认事件
			onInput() {
				let displayValue = 1
				this.controlStatus = true;
				if (this.display) {
					// 关闭时弹窗确认
					displayValue = 0
					// 确定按钮
					this.isSecrecy = false
					this.switchTypeFun(displayValue)
					this.display = !this.display
				}
			},
			// 简历状态切换提交接口
			switchTypeFun(value) {
				http
					.post(api.resume_privates_set_display, {
						display: value
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							this.updateStoreBasic(value)
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 更新store基本资料
			updateStoreBasic(value) {
				let currentBasic = this.$store.state.resume.basic
				currentBasic.is_display = value
				// 更新基本资料
				this.$store.dispatch('setBasicInfo', currentBasic)
			},
			// 简历姓名显示切换
			handleDisplayName(value) {
				console.log(value)
				http
					.post(api.resume_privates_set_display_name, {
						display: parseInt(value)
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							let currentBasic = this.$store.state.resume.basic
							currentBasic.display_name = parseInt(value)
							// 更新基本资料
							this.$store.dispatch('setBasicInfo', currentBasic)
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 删除屏蔽企业
			handleDelete(id) {
				http
					.post(api.resume_privates_deleteBlacklist, {
						id: id
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							this.blackList.splice(
								this.blackList.findIndex(
									item => parseInt(item.id) === parseInt(id)
								),
								1
							)
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box_4 {
		width: 300px;
		margin: 0 auto;
	}

	.box_3 {
		width: 100%;
		background-color: #ffffff;
		padding: 0 30rpx 70rpx 30rpx;

		.tx2 {
			position: relative;
			width: 100%;
			border-bottom: 2rpx solid #f8f8f8;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			word-break: break-all;
			font-size: 28rpx;
			color: #333333;
			padding: 25rpx 6rpx;

			.del {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(0, -50%);
				width: 60rpx;
				height: 100%;
				background-image: url(./static/img/round_close.png);
				background-position: center;
				background-repeat: no-repeat;
				background-size: 36rpx;
			}
		}

		.tx1 {
			padding: 55rpx 0 25rpx;
			font-size: 36rpx;
			color: #333333;
			font-weight: bold;
		}
	}

	.box_2 {
		width: 100%;
		background-color: #ffffff;
		padding: 0 0 0 30rpx;

		.tx1 {
			padding: 55rpx 0 25rpx;
			font-size: 36rpx;
			color: #333333;
			font-weight: bold;
		}

		.tx2 {
			padding: 19rpx 0;
			font-size: 28rpx;
			color: #333333;
			position: relative;

			text {
				color: #999999;
			}

			.self_radio {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translate(0, -50%);
			}
		}
	}

	.box_1 {
		width: 100%;
		background-color: #ffffff;
		padding: 0 0 24rpx 30rpx;

		.tx1 {
			padding: 55rpx 0 25rpx;
			font-size: 36rpx;
			color: #333333;
			font-weight: bold;
		}

		.tx2 {
			padding: 19rpx 0;
			font-size: 28rpx;
			color: #333333;
			position: relative;
			/* #ifdef MP-ALIPAY */
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 19rpx 30rpx 19rpx 0;
			/* #endif */

			.self_switch {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translate(0, -50%);
			}
		}
	}
</style>
